<template>
  <div class="index">
    <div class="top">
      <span>{{ndata}}</span>
      <div class="title">
        <router-link to="/index">首页</router-link>
        <router-link to="/comic">动漫站</router-link>
        <router-link to="/123">博客站</router-link>
        <router-link to="/index">友情链接</router-link>
        <router-link to="/index">关于作者</router-link>
      </div>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datatime: "",
      ndata: "",
      timer: "",
    };
  },

  methods: {
    nowtime() {
      this.datatime = new Date();
      let y = this.datatime.getFullYear();
      let m = this.datatime.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = this.datatime.getDate();
      d = d < 10 ? "0" + d : d;
      let h = this.datatime.getHours();
      let minute = this.datatime.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      let secend = this.datatime.getSeconds();
      secend = secend < 10 ? "0" + secend : secend;
      return y + "年" + m + "月" + d + "日" + '-' + h + ":" + minute + ":" + secend;
    },
  },
  created() {
    this.timer = setInterval(() => {
      this.ndata = this.nowtime();
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped>
.index {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: url("@/assets/1280-720.jpg");
  span{
    float: right;
    color: white;
    letter-spacing: 3px;
    line-height: 30px;
  }
  .top {
    width: 100%;
    height: 30px;
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.623);
    position: relative;
    .title{
      margin: 0 auto;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
    }
    a{
      font-size: 14px;
      color: rgb(201, 199, 199);
      text-decoration: none;
      display: block;
      margin: 0 5px;
      line-height: 30px;
    }
    a:hover{
      color: white;
    }
  }
  .content{
    width: 100%;
    height: 100%;
  }
}
</style>
